import topdisplay from '@/assets/image/topdisplay.png';
import { Tooltip } from 'antd';
import React from 'react';

// import '../index.less';

const DocItem: React.FC<any> = (props: any) => {
  const { item, showDemo, tabName, type, showTopClick } = props;

  const showTop = (e: any) => {
    e.stopPropagation();
    if (type === 'otherDoc') {
      showTopClick(item);
    }
  };

  const userScoreBg = (user_score: any) => {
    if (!user_score) return '#F3F3F8';

    const score = user_score as number;
    switch (true) {
      case score >= 8.0 && score <= 10.0:
        return '#C8F9B9';
      case score >= 6.0 && score < 8.0:
        return '#FFE7B6';
      case score < 6.0:
        return '#FFCFCF';
    }
  };

  return (
    <div className="docTypeList" onClick={(event) => showDemo(event, item, type)}>
      <div className="docTypeInfo">
        <div className="docTypeTitle flex-aitem-center">
          <div className="rate-circle f-s-14"></div>
          <div className="m-l-10">NO.{item.doc_no}</div>
        </div>
        <div className="docTypeDesc">
          {item.current_document_version && item.current_document_version.system_output
            ? item.current_document_version.system_output
            : '-'}
        </div>
        <div className="flex-jcon-sb m-t-5 docTypeDemo">
          <div className="t-a-c ai-rate">
            <div className="f-s-12 m-t-5">AI评分</div>
            <div className="rate-num f-s-16">{item.standard_score}</div>
          </div>
          <div
            className="m-l-10 t-a-c my-rate"
            style={{
              background: userScoreBg(item.user_score),
            }}
          >
            <div className="f-s-12 m-t-5">我的评分</div>
            <div className={item.user_score ? 'rate-num f-s-16' : 'rate-no f-s-14'}>
              {item.user_score ? item.user_score : '未评分'}
            </div>
          </div>
        </div>
        <div className="cardFoot">
          <div className="tab-name">{tabName}</div>
          <Tooltip
            placement="top"
            title={type === 'otherDoc' ? '置顶' : ''}
            arrow={true}
            className={`card-more ${type !== 'otherDoc' ? 'card-more-cursor' : ''}`}
          >
            <div onClick={(e) => showTop(e)}>
              {type === 'otherDoc' ? <img src={topdisplay} height={15} width={15} /> : null}
            </div>
          </Tooltip>
        </div>
      </div>
    </div>
  );
};

export default DocItem;
